import { Card, Typography, Avatar } from 'antd';
import { useMemo } from 'react';
import { Handle, NodeProps, Position } from 'reactflow';

const { Title } = Typography;

function CustomNode({ id, data, selected }: NodeProps) {
  const node = data;

  const handleStyle = useMemo(
    () => ({
      width: 10,
      height: 10,
      background: '#1677ff',
      border: '2px solid #fff',
    }),
    [],
  );

  return (
    <>
      {/* 连接点 */}
      <Handle type="target" position={Position.Top} isConnectable style={handleStyle} />
      <Handle type="source" position={Position.Bottom} isConnectable style={handleStyle} />

      <Card
        className="h-auto min-w-[180px] cursor-pointer"
        hoverable
        style={{
          boxShadow: selected
            ? '0 0 0 2px #1677ff'
            : '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09)',
        }}
      >
        <div className="flex items-center gap-2">
          {node.avatar && <Avatar src={node.avatar} size="small" className="flex-shrink-0" />}
          <Title level={5} ellipsis={{ tooltip: node.name }} className="m-0 text-base font-medium">
            {node.name}
          </Title>
        </div>
      </Card>
    </>
  );
}

export default CustomNode;
